import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import { getUserInfoAPI } from '@/api'

// vuex默认保存在内存中，所以刷新所有的值会回归初始化（无法做到持久化存储）
// 借助yarn add vuex-persistedstate@3.2.1这个包可以让vuex做持久化
Vue.use(Vuex)

export default new Vuex.Store({
  // 类似组件中的data
  state: {
    token:'', //保存token字符串
    userInfo:{} //保存用户信息
  },


  // 类似组件中的computed
  getters: {
    username:state=>state.userInfo.username,  //用户名
    nickname:state=>state.userInfo.nickname,  //用户昵称
    user_pic:state=>state.userInfo.user_pic,  //用户头像
  },


  // 类似组件中的methods，唯一可以修改state的地方，必须是同步操作
  mutations: {
    // 用来保存token
    updateToken(state,val){
      state.token=val
    },

    // 保存更新用户信息
    updateUserInfo(state,val){
      state.userInfo=val
    }
  },


  // 用于提交mutations，可以包含异步操作
  actions: {
    getUserInfoActions(store){
      getUserInfoAPI().then((res)=>{
        // console.log(res.data.data)
        store.commit('updateUserInfo',res.data.data)
      })
    }
  },


  // 分割成模块，每个模块拥有自己的state、getter、mutations、actions和modules
  modules: {
  },

  plugins:[
    createPersistedState() //注入持久化插件
  ]
})
